<template>
  <section>
    <div class="button-group">
      <el-button type="primary" @click="showAddUser">新增</el-button>
    </div>
    <ft-table
      ref="userTable"
      :data="users"
      :columns="userColumns"
      :cell-style="{background: 'rgba(84, 92, 100, 0.25)'}"

    >
      <template #operation="{ row }">
        <i
          class="el-icon-edit-outline color-blue left-space"
          @click="showEditUser(row)"
        ></i>
        <i class="el-icon-delete color-danger left-space" @click="delUser(row)"></i>
      </template>

      <template #addDevice="{ row }">
        <i class="el-icon-circle-plus-outline color-blue left-space" @click="addDevice(row)"></i>
      </template>

    </ft-table>

    <el-drawer
      ref="drawer"
      :visible.sync="showDrawer"
      @open="beforeOpenDrawer"
      :with-header="false"
    >
      <h3>{{drawerTitle}}</h3>
      <el-form ref="form"  :model="user" label-width="100px" :rules="rules">

        <el-form-item label="用户名">
          <el-input v-model="user.name"></el-input>
        </el-form-item>
        
        <el-form-item label="密码">
          <el-input v-model="user.pwd"></el-input>
        </el-form-item>

        <el-form-item label="确认密码">
          <el-input v-model="user.ackpwd"></el-input>
        </el-form-item>

        <el-form-item label="主题">
          <el-input v-model="user.topic"></el-input>
        </el-form-item>
        <el-form-item label="传输周期">
          <el-input v-model="user.period" disabled></el-input>
        </el-form-item>
      </el-form>

      <div class="drawer__footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
      </div>
    </el-drawer>


    <el-dialog 
      title="提示"
      :visible.sync="dialogVisible"
      width="80%"
      class="device-dialog"
    >
       <my-device  :user="user"></my-device>
    </el-dialog>

  </section>
</template>
<script>
import {getUserApi, updateUserApi} from '@/api/user.js';
import {isDel} from '@/util/comman';

import MyDevice from './device'
import { v4 as uuidv4 } from 'uuid';

export default {
  name: 'user',
  components: {
    MyDevice
  },
  props:{
    data: Object
  },
  data(){
    return {
      users: [],
      user: {
        name: '',
        pwd: '',
        topic: '',
        period: 100,
        ackpwd: '',
      },
      userColumns:[
        {prop: 'name', label: '用户名', align: 'center'},
        {prop: 'pwd', label: '密码', align: 'center'},
        {prop: 'topic', label: '主题', align: 'center'},
        {prop: 'period', label: '传输周期', align: 'center'},
        {prop: 'operation', label: '操作', align: 'center', slot: true},
        {prop: 'addDevice', label: '分配节点', align: 'center', slot: true},

      ],
      showDrawer: false,
      drawerTitle: '新增用户',
      loading: false,
      rules: {

      },
      dialogVisible: false,
    }
  },
  mounted(){
    this.refreshUser();
  },
  methods: {
    refreshUser(){
      getUserApi().then(res =>{
        if(res.code == 0 ){
          this.showDrawer = false;
          this.users = res.data;
        }
      })
    },
    showAddUser(){
      this.showDrawer = true;
      this.drawerTitle = '新增用户';
      this.user = { };
     
    },
    showEditUser(row){
      this.showDrawer = true;
      this.drawerTitle = '编辑用户';
      this.user = row;
    },
    addUser(){
      delete this.user.ackpwd;
      this.user.id = uuidv4();

      const data = [...this.users, this.user]
      this.updateUser(data);     
    },
    update(data){
      updateUserApi(data).then(res => {
        this.loading = false;
        if(res.code == 0){
          this.$message({type: 'success', message: '提交成功'})
          this.refreshUser();
        }
      })
    },
    updateUser(){
      delete this.user.ackpwd;
      const data = this.users.map(item => {
        if(item.id == this.user.id) item = this.user;
        return item;
      })
      this.update(data);
    },
    async delUser(row){
      const flag = await isDel(row.user);
      if(!flag) return;
      let  data = [];
      this.users.forEach(item => {
        if(item.id != this.user.id ) data.push(item)
      })

      this.update(data);
    },
    
    beforeOpenDrawer(){
      this.loading = false;
    },
    cancel(){
      this.showDrawer = false;
    },
    confirm(){
      this.$refs.form.validate( valid => {
        if(valid){
          this.loading = true;
          if(this.user.id) this.updateUser();
          else this.addUser();
        }
      })
    },

    addDevice(row){
      this.dialogVisible = true;
      this.user = row;
    }
  }

}
</script>
<style  scoped>
.button-group{
 display: flex;
 justify-content: flex-end;
 padding: 10px;
}
.drawer__footer{
  margin-left: 30px;
}
.device-dialog ::v-deep .el-dialog{
  height: 75vh;
}
</style>
